<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>处理订单 - 点餐系统</title>
    <link rel="stylesheet" href="lib/element-ui.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="header-title">处理订单</div>
        </div>

        <!-- 订单信息 -->
        <div class="process-container" v-if="order">
            <div class="order-detail">
                <div class="detail-section">
                    <div class="section-title">📋 订单信息</div>
                    <div class="detail-item">
                        <span class="label">订单ID：</span>
                        <span class="value">{{ order.id }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">客户姓名：</span>
                        <span class="value">{{ order.customerName }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">下单时间：</span>
                        <span class="value">{{ formatTime(order.createTime) }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">客户备注：</span>
                        <span class="value">{{ order.note || '无' }}</span>
                    </div>
                </div>

                <div class="detail-section">
                    <div class="section-title">🛒 订单内容</div>
                    <div class="order-items">
                        <div 
                            v-for="(item, index) in order.orderDetails" 
                            :key="index"
                            class="order-detail-item">
                            <span class="item-name">{{ item.productName }}</span>
                            <span class="item-quantity">×{{ item.quantity }}</span>
                        </div>
                    </div>
                </div>

                <!-- 处理操作 -->
                <div class="process-section">
                    <div class="section-title">⚡ 处理订单</div>
                    <div class="process-actions">
                        <button 
                            class="process-btn complete-btn" 
                            @click="processOrder(1)">
                            ✅ 完成订单
                        </button>
                        <button 
                            class="process-btn reject-btn" 
                            @click="processOrder(2)">
                            ❌ 驳回订单
                        </button>
                    </div>
                    
                    <div class="process-note">
                        <textarea 
                            class="form-textarea" 
                            placeholder="处理备注（可选）"
                            v-model="processNote"
                            maxlength="200"
                            rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- 加载状态 -->
        <div v-else-if="loading" class="loading-state">
            <div class="loading-spinner"></div>
            <div>加载订单信息...</div>
        </div>

        <!-- 错误状态 -->
        <div v-else class="error-state">
            <div class="error-icon">❌</div>
            <div class="error-text">订单不存在或加载失败</div>
            <button class="retry-btn" @click="loadOrder">重试</button>
        </div>
    </div>

    <script src="lib/vue.js"></script>
    <script src="lib/element-ui.js"></script>
    <script src="lib/axios.js"></script>
    <script src="js/api.js"></script>
    <script src="js/process.js"></script>
</body>
</html>